<template>
  <div class="home">
    <div class="title">曲靖市消防救援支队指挥中心接警调度辅助平台</div>
<!-- 曲靖消防地理信息快速响应训练平台 -->
    <div class="content">
      <div class="link">
        <router-link to="/login">
          <div>已注册用户登录</div>
        </router-link>
        <router-link to="/register">
          <div>未注册用户注册</div>
        </router-link>
      </div>

      <div class="view">
        <router-view></router-view>
      </div>

    </div>

    <!-- 版权 -->
    <div class="copyright">
      <div class="copyright_content">
        <!-- 左边区域 -->
        <div class="copyright_content_left">
          <div class="copyright_content_left_li">
            <div class="copyright_content_left_li_p copyright_a" @click="To_Product_Introduction">产品介绍</div>
            <div class="copyright_content_left_li_p copyright_center">|</div>
            <div class="copyright_content_left_li_p Developer copyright_a" @click="To_Call_Developer">技术支持</div>
          </div>
          <div class="copyright_content_left_li">
            开发单位：曲靖市消防救援支队指挥中心
          </div>
          <div class="copyright_content_left_li">
            单位地址：云南省曲靖市麒麟区紫云南路118号
          </div>
        </div>

        <!-- 右边区域 -->
        <div class="copyright_content_right">
          <div class="copyright_content_right_li">
            <div class="copyright_content_right_li_img team_logo">
              <img src="../assets//team_logo.png" alt="">
            </div>
            <div class="copyright_content_right_li_text"></div>
          </div>
          <div class="copyright_content_right_li">
            <div class="copyright_content_right_li_img">
              <img src="../assets/logo.jpg" alt="">
            </div>
            <div class="copyright_content_right_li_text"></div>
          </div>
          <div class="copyright_content_right_li" @mouseenter="is_QR_show" @mouseleave="is_QR_hide">
            <div class="copyright_content_right_li_img QR_small">
              <img src="../assets//zhzx_QRcode.jpg" alt="">
            </div>
            <div class="copyright_content_right_li_text">官方微信</div>
          </div>
        </div>
      
      </div>

      <!-- 二维码放大 -->
      <div class="QR_sacle" v-if="QR_is_show">
        <img src="../assets/zhzx_QRcode.jpg" alt="">
      </div>

    </div>

    <!-- 技术支持 -->
     <div class="Developer_view" v-if="is_show_Developer_view">
      <div class="Developer_content">
        <div class="Developer_content_title">
          <div class="Developer_content_title_li"></div>
          <div class="Developer_content_title_li">开发者技术支持</div>
          <div class="Developer_content_title_li Developer_view_shutdown">
            <i class="iconfont icon-guanbi" @click="To_Call_Developer"></i>
          </div>
        </div>
        <div class="Developer_content_content">
          <div class="Developer_content_content_li">
            <div class="Developer_content_content_li_title">微信扫一扫</div>
            <div class="Developer_content_content_li_content">
              <div class="Developer_content_content_li_content_QR">
                <img src="../assets//Developer_wechatQRcode.png" alt="">
              </div>
            </div>
          </div>
          <div class="Developer_content_content_li">
            <div class="Developer_content_content_li_title">联系电话</div>
            <div class="Developer_content_content_li_content">
              <div class="Developer_content_content_li_content_QR Developer_call_phone">
                <div class="Developer_call_phone_li">
                  <i class="iconfont icon-dianhua"></i>&nbsp;&nbsp;<span>：15887935394</span>
                </div>
                <div class="Developer_call_phone_li">
                  <div class="ronghetongxin_logo">
                    <img src="../assets/ronghetongxin.png" alt="">
                  </div>
                  <div class="ronghetongxin_phone">：2239</div>
                </div>
              </div>
            </div>
          </div>

          <div class="Developer_content_content_li">
            <div class="Developer_content_content_li_title">QQ扫一扫</div>
            <div class="Developer_content_content_li_content">
              <div class="Developer_content_content_li_content_QR">
                <img src="../assets//Developer_qqQRcode.jpg" alt="">
              </div>
            </div>
          </div>
        </div>
        <!-- 说明 -->
        <div class="Developer_content_Explanation">
          <div class="Developer_content_Explanation_text">
            尊敬的各位用户，如在使用本产品的过程中出现任何的错误信息或者功能失效的情况请联系开发者进行修复处理，<br> 感谢您为本产品做出的贡献！
          </div>
        </div>
      </div>
     </div>


     <!-- 产品介绍 -->
      <div class="Product_Introduction_view" v-if="is_show_Product_Introduction">
        <div class="Product_Introduction_title">
          <div class="Product_Introduction_title_li"></div>
          <div class="Product_Introduction_title_li">产品介绍</div>
          <div class="Product_Introduction_title_li">
            <i class="iconfont icon-guanbi Product_Introduction_shutdown" @click="To_Product_Introduction"></i>
          </div>
        </div>

        <div class="Product_Introduction_content">
          <div class="Product_Introduction_content_left">
            <div class="Product_Introduction_content_left_text">
              <strong>自主研发接警调度辅助训练平台</strong>
              <p>自开展集中接警机制改革以来，支队指挥中心全面承担全市接警调度任务。然而，接警员对全市辖区地理位置的熟悉程度，尚难以适应接警任务范围的大幅拓展，导致接警过程中耗时较长，甚至出现救援力量误派等情况，极大影响了接警调度效率。</p>
<p>为有效解决这一痛点、难点问题，支队指挥中心组织研发了“接警调度地址地名辅助训练平台”。该平台设有“训练”和“考核”两大核心模块：训练模块整合了全市91个乡镇及37个街道的基础地理资料，融合游戏化学习理念，创新设置了多种寓教于乐学习方法，便于接警员学习记忆，内容包含“区划全览”“看图识域”“地名寻图”等内容，其中“区划全览”可查看各县市区所辖全部乡镇街道的数量、区位、名称等信息，“看图识域”可通过地图识别对应行政区划名称，“地名寻图”可随机生成乡镇、街道名称，并在地图上定位其所属行政区域，通过互动式学习机制，将传统枯燥的学习过程转化为趣味性的互动体验，有效提升了学习成效；考核模块则侧重于检验和巩固学习成果，该模块可随机生成100道考题，参考接警员对给定的乡镇街道所属县市区进行逐一判断，系统评估接警员对全市乡镇街道情况的掌握程度，检验接警员在图上精准识别乡镇街道的地理位置能力。通过“训练+考核”的闭环设计，有效解决以往接警员在掌握辖区行政区划记忆模糊、定位迟缓等问题，接警员对全市地理信息快速定位、空间记忆能力显著提升。</p>
<p>下一步，支队还将深化平台迭代研发，完善国家队、专职队等救援力量的空间分布、县乡两级基础资料库，拓展交通要道等地理信息维度，增设同音字联想、首字母检索、模糊地名匹配等智能查询手段，开发接警场景专项训考模块，持续提升队伍接警调度水平。</p>
            </div>
          </div>
          <div class="Product_Introduction_content_right">
            <div class="Product_Introduction_content_right_title">使用说明</div>
            <div class="Product_Introduction_content_right_content">
              <div class="Product_Introduction_content_right_content_Carousel">
                <!-- 组件 -->
                  <div class="block">
                    <el-carousel trigger="click" height="40vh">
                      <el-carousel-item v-for="item in 4" :key="item">
                        <!-- <h3 class="small">{{ item }}</h3> -->
                         <img :src="require(`../assets/Explanation_${item}.jpg`)" alt="说明图">
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                <!-- 组件 -->
              </div>
            </div>
          </div>
        </div>
      </div>

  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomePage',
  data(){
    return{
      QR_is_show:false,
      is_show_Developer_view:false,
      is_show_Product_Introduction:false,
    }
  },
  components: {

  },

  methods:{
    To_Friendship_Links(){
      // 跳转友情链接
      console.log("跳转友情链接")
    },
    To_Call_Developer(){
      // 打开开发者联系方式界面
      // console.log('开发者诶点击')
      this.is_show_Product_Introduction = false
      this.is_show_Developer_view = !this.is_show_Developer_view
    },
    is_QR_show(){
      this.QR_is_show = true
    },
    is_QR_hide(){
      this.QR_is_show = false
    },
    To_Product_Introduction(){
      this.is_show_Developer_view = false
      this.is_show_Product_Introduction = !this.is_show_Product_Introduction
    },
    
    
    
  }
}

</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .home{
    width: 100%;
    height: 100vh;
    background-color: antiquewhite;
    background: url("@/assets/function.png") no-repeat center/cover fixed;     /* 地址 背景不重复 覆盖整个元素 居中 固定背景*/
  }
  .title{
    width: 65vw;
    height: 40vh;
    /* background-color: yellow; */
    font-size: 5vw;
    position: absolute;
    top:10vh;
    left: calc(50% - 32.5vw);
    /* line-height: 300px; */
    text-align: center;
    white-space: normal;
    color: rgb(248, 243, 243);
    text-shadow: 3px 3px 5px rgb(146, 143, 143);
  }
  .content{
    width: 500px;
    height: 250px;
    /* background-color: #e0cdb6; */
    position: absolute;
    top: 45vh;
    left: calc(50% -  250px);
    border-radius: 10px;
    overflow: hidden;
    /* border: 1px solid black; */
    box-shadow: 0px 0px 4px 4px black;
  }
  .link{
    width: 100%;
    height: 30px;
    /* background-color: rgba(250, 250, 243,0.1); */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }

  .link div{
    width: 250px;
    height: 100%;
    color: #f3f1ee;
    font-weight: bolder;
    /* background-color: rgb(92, 178, 235); */
    float: left;
    text-align: center;
    line-height: 30px;
    border-bottom: rgb(48, 82, 175) solid 1px;
  }
  .link div:hover{
    color: rgb(22, 211, 107);
    /* color: rgb(22, 0, 0); */
    font-size: 1vw;
  }
  .link div:first-child{
    border-right: black solid 1px;
  }
  .view{
    width: 100%;
    height: 220px;
    /* background-color: #dfdf0a; */
    overflow: hidden;
  }

  .copyright{
    width: 100%;
    height: 15vh;
    background-color: rgba(6, 18, 46,0);
    /* background-color: rgb(17, 83, 236); */
    /* float: left; */
    position: relative;
    top: 85vh;
    overflow: hidden;
    color: white;
    box-sizing: border-box;
    overflow: hidden;
  }

  .copyright_content{
    width: 30%;
    height: 60%;
    /* background-color: aquamarine; */
    position: relative;
    top: 40%;
    left: calc(50% - 15%);
  }
  .copyright_content_left{
    width: 50%;
    height: 100%;
    /* background-color: aqua; */
  }
  .copyright_content_left_li{
    width: 100%;
    height: 33.3%;
    /* background-color: bisque; */
    font-size: 0.7vw;
    line-height: 3vh;
  }
  .copyright_content_left_li_p{
    width: 33.3%;
    height: 100%;
    /* background-color: chartreuse; */
    float: left;
  }
  .copyright_content_left_li_p:nth-child(1){
    width: 29%;
  }
  .copyright_center{
    width: 10%;
  }
  .copyright_a:hover{
    color: rgb(9, 255, 0);
    cursor: pointer;
  }
  .copyright_a:active{
    color: rgb(231, 155, 14);
  }
  

  .copyright_content_right{
    width: 50%;
    height: 100%;
    /* background-color: red; */
    position: relative;
    left: 15vw;
    top: -9vh;
    /* float: left; */
  }

  .copyright_content_right_li{
    width: 33.3%;
    height: 100%;
    /* background-color: chartreuse; */
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    /* border-right: black 1px solid; */
  }

  .copyright_content_right_li_img{
    width: 80%;
    height: 75%;
    /* background-color: cyan; */
    position: relative;
    left: calc(50% - 40%);
  }
  .team_logo img{
    position: relative;
    left: 0.5vw;
  }
  
  
  .copyright_content_right_li_img img{
    width: 100%;
    height: 100%;
  }

  .copyright_content_right_li_text{
    width: 100%;
    height: 25%;
    /* background-color: red; */
    text-align: center;
    line-height: 2vh;
  }

  .QR_sacle{
    width: 7vw;
    height: 14vh;
    background-color: red;
    position: relative;
    top:-9vh;
    left: 65vw;
  }
  .QR_sacle img{
    width: 100%;
    height: 100%;
    position: relative;
    top:-9vh
  }


 
  .Developer_view{
    width: 100%;
    height: 30%;
    /* background-color: rgb(255, 255, 255); */
    position: relative;
    top: 45vh;
    /* left: calc(50% - 15%); */
    /* box-shadow: 0 0 10px 3px black; */
    /* border-radius: 10px; */
  }

  .Developer_content{
    width: 30%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    position:relative;
    left: calc(50% - 15%);
    border-radius: 10px;
    overflow: hidden;
  }
  .Developer_content_title{
    width: 100%;
    height: 15%;
    background-color: rgb(255, 255, 255);
    text-align: center;
    line-height: 4vh;
    border-bottom: 1px solid black;
  }
  .Developer_content_title_li{
    width: 33.3%;
    height: 100%;
    /* background-color: red; */
    float: left;
  }
  .Developer_view_shutdown i{
    position: relative;
    left: 4vw;
    font-weight: bolder;
  }
  .Developer_view_shutdown i:hover{
    color: red;
  }
  .Developer_view_shutdown i:active{
    color: rgb(8, 248, 88);
  }


  .Developer_content_content{
    width: 100%;
    height: 60%;
    /* background-color: aquamarine; */
    box-sizing: border-box;
    overflow: hidden;
  }

  .Developer_content_content_li{
    width: 33.3%;
    height: 100%;
    /* background-color: antiquewhite; */
    /* float: left; */
    /* border-right: 1px solid black; */
  }
  .Developer_content_content .Developer_content_content_li:nth-child(2){
    position: relative;
    left:33.3%;
    top:-18vh;
  }
  .Developer_content_content .Developer_content_content_li:nth-child(3){
    position: relative;
    left:66.6%;
    top:-36vh;
  }

  .Developer_content_content_li_title{
    width: 100%;
    height: 15%;
    /* background-color: cadetblue; */
    text-align: center;
    line-height:2.5vh;
    font-size: 0.7vw;
  }

  .Developer_content_content_li_content{
    width: 100%;
    height: 85%;
    /* background-color: rgb(106, 231, 200); */
  }
  .Developer_content_content_li_content_QR{
    width: 80%;
    height: 100%;
    /* background-color: bisque; */
    position: relative;
    left: calc(50% - 40%);
  }

  .Developer_content_content_li_content_QR img{
    width: 100%;
    height: 100%;
  }
  .Developer_call_phone{
    width: 80%;
    position: relative;
    left: calc(50% - 40%);
    padding-top: 1vh;
  }
  .Developer_call_phone_li{
    width: 100%;
    height: 20%;
    /* background-color: yellowgreen; */
    border-bottom: 1px solid black;
    text-align: center;
    line-height: 3vh;
    /* font-size: 0.8vw; */
    /* overflow: hidden; */
  }
  .Developer_call_phone_li span{
    font-size: 0.90vw;
  }
  .Developer_call_phone_li i{
    color: rgb(195, 159, 32);
    font-weight: bolder;
    font-size: 1.2vw;
  }
  .ronghetongxin_logo{
    width: 20%;
    height: 100%;
    /* background-color: red; */
    position: relative;
    left: -0.2vw;
  }
  .ronghetongxin_logo img{
    width: 100%;
    height: 100%;
  }
  .ronghetongxin_phone{
    width: 70%;
    height: 100%;
    /* background-color: red; */
    float: left;
    position: relative;
    top:-3vh;
    left: calc(15% + 0.4vw);
    text-align: left;
    font-size: 0.8vw;
  }

  .Developer_content_Explanation{
    width: 100%;
    height: 25%;
    /* background-color: cadetblue; */
  }

  .Developer_content_Explanation_text{
    width: 60%;
    height: 100%;
    /* background-color: yellowgreen; */
    position: relative;
    left: calc(50% - 30%);
    font-size: 0.6vw;
    padding: 0.5vw;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 1vh;
    /* line-height: 3vh; */
  }



  .Product_Introduction_view{
    width: 50vw;
    height: 50vh;
    background-color: rgb(255, 255, 255);
    position: relative;
    top: 25vh;
    left: calc(50% - 25%);
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    box-sizing: border-box;
    overflow: hidden;
  }

  .Product_Introduction_title{
    width: 100%;
    height: 10%;
    /* background-color: aquamarine; */
    border-bottom: 1px solid black;
  }
  .Product_Introduction_title_li{
    width: 33.3%;
    height: 100%;
    /* background-color: burlywood; */
    float: left;
    text-align: center;
    line-height: 4.5vh;
  }

  .Product_Introduction_shutdown{
    position: relative;
    left: 7vw;
    font-size: 1.5vw;
  }
  .Product_Introduction_shutdown:hover{
    color: red;
  }
  .Product_Introduction_shutdown:active{
    color: rgb(5, 250, 107);
  }

  .Product_Introduction_content{
    width: 100%;
    height: 90%;
    /* background-color: aquamarine; */
  }

  .Product_Introduction_content_left{
    width: 40%;
    height: 100%;
    /* background-color: red; */
  }
  .Product_Introduction_content_left_text{
    width: 95%;
    height: 95%;
    background-color: rgb(238, 233, 238);
    position: relative;
    top: 2.5%;
    left: calc(50% - 47.5%);
    box-sizing: border-box;
    overflow: hidden;
    padding: 0.3vw;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .Product_Introduction_content_left_text strong{
    display: block;
    width: 100%;
    /* height: 8%; */
    /* background-color: red; */
    text-align: center;
    /* line-height: 3vh; */
    font-size: 0.9vw;
    margin-bottom: 1vh;
    color: rgb(110, 110, 109);
  }
  .Product_Introduction_content_left_text p{
    text-indent:2em;
    font-size: 0.7vw;
    line-height: 3vh;
    color: rgb(105, 105, 104);
  }

  .Product_Introduction_content_right{
    width: 60%;
    height: 100%;
    /* background-color: rgb(23, 228, 74); */
    position: relative;
    left: 40%;
    top: -100%;
  }

  .Product_Introduction_content_right_title{
    width: 100%;
    height: 8%;
    /* background-color: rgb(23, 52, 221); */
    text-align: center;
    line-height: 3.5vh;
  }

  .Product_Introduction_content_right_content{
    width: 100%;
    height: 92%;
    /* background-color: rgb(230, 170, 40); */
  }
  .Product_Introduction_content_right_content_Carousel{
    width: 98%;
    height: 96%;
    background-color: yellowgreen;
    position: relative;
    top: 1%;
    left: calc(50% - 49%);
  }

  .Product_Introduction_content_right_content_Carousel img{
    width: 100%;
    height: 100%;
  }
  

  



</style>